<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>Material Design Bootstrap</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="css/mdb.min.css" rel="stylesheet">

    <!-- Your custom styles (optional) -->
    <link href="css/style.css" rel="stylesheet">
</head>

<body class="fixed-sn blue-skin">

    <!-- Modal Contact 模态框-->
        <div class="modal fade modal-ext" id="modal-contact" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <!--Content-->
        <div class="modal-content">
            <!--Header-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Write to us</h4>
            </div>
            <!--Body-->
            <div class="modal-body">
                <p>We like to receive a messages.</p>
                <br>
                <div class="md-form">
                    <i class="fa fa-user prefix"></i>
                    <input type="text" id="form22" class="form-control">
                    <label for="form42">Your name</label>
                </div>

                <div class="md-form">
                    <i class="fa fa-envelope prefix"></i>
                    <input type="text" id="form32" class="form-control">
                    <label for="form34">Your email</label>
                </div>

                <div class="md-form">
                    <i class="fa fa-tag prefix"></i>
                    <input type="text" id="form32" class="form-control">
                    <label for="form34">Subject</label>
                </div>

                <div class="md-form">
                    <i class="fa fa-pencil prefix"></i>
                    <textarea type="text" id="form8" class="md-textarea"></textarea>
                    <label for="form8">Icon Prefix</label>
                </div>

                <div class="text-center">
                    <button class="btn btn-primary">Submit</button>

                    <div class="call">
                        <p>Or would you prefer to call? <span class="cf-phone"><i class="fa fa-phone"> +01 234 565 280</i></span></p>
                    </div>
                </div>
            </div>
            <!--Footer-->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!--/.Content-->
    </div>
    </div>
    <!-- ./ Modal Contact 模态框-->

    <!-- Modal Cart Modal -->
        <div class="modal fade cart-modal" id="cart-modal-ex" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <!--Content-->
        <div class="modal-content">
            <!--Header-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Your cart</h4>
            </div>
            <!--Body-->
            <div class="modal-body">

                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Product name</th>
                            <th>Price</th>
                            <th>Remove</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Product 1</td>
                            <td>100$</td>
                            <td><a><i class="fa fa-remove"></i></a></td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Product 2</td>
                            <td>100$</td>
                            <td><a><i class="fa fa-remove"></i></a></td>
                        </tr>
                        <tr>
                            <th scope="row">3</th>
                            <td>Product 3</td>
                            <td>100$</td>
                            <td><a><i class="fa fa-remove"></i></a></td>
                        </tr>
                        <tr>
                            <th scope="row">4</th>
                            <td>Product 4</td>
                            <td>100$</td>
                            <td><a><i class="fa fa-remove"></i></a></td>
                        </tr>
                        <tr class="total">
                            <th scope="row">5</th>
                            <td>Total</td>
                            <td>400$</td>
                        </tr>
                    </tbody>
                </table>

                <button class="btn btn-primary">Checkout</button>

            </div>
            <!--Footer-->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!--/.Content-->
    </div>
    </div>
    <!-- /.Modal Cart Modal-->

    <!--Modal: Login Form 登录模态框 -->
        <div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog cascading-modal" role="document">
    <!--Content-->
    <div class="modal-content">

        <!--Header-->
        <div class="modal-header light-blue darken-3 white-text">
            <h4 class="title"><i class="fa fa-user"></i> Log in</h4>
            <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <!--Body-->
        <div class="modal-body">
            <div class="md-form form-sm">
                <i class="fa fa-envelope prefix"></i>
                <input type="text" id="form30" class="form-control">
                <label for="form30">Your email</label>
            </div>

            <div class="md-form form-sm">
                <i class="fa fa-lock prefix"></i>
                <input type="password" id="form31" class="form-control">
                <label for="form31">Your password</label>
            </div>

            <div class="text-center mt-2">
                <button class="btn btn-info">Log in <i class="fa fa-sign-in ml-1"></i></button>
            </div>

        </div>
        <!--Footer-->
        <div class="modal-footer">
            <div class="options text-center text-md-right mt-1">
                <p>Not a member? <a href="#">Sign Up</a></p>
                <p>Forgot <a href="#">Password?</a></p>
            </div>
            <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
        </div>
    </div>
    <!--/.Content-->
    </div>
    </div>
    <!--Modal: Login Form 登录模态框 -->

<!--Navigation导航-->
<header>
     <!-- SideNav slide-out button
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
    <!--/. SideNav slide-out button -->

    <!-- Sidebar navigation 侧边导航栏-->
    <ul id="slide-out" class="side-nav fixed default-side-nav ">

        <!-- Logo -->
        <div class="logo-wrapper waves-light">
            <a href="#"><img src="https://mdbootstrap.com/wp-content/uploads/2015/12/mdb-white2.png" class="img-fluid flex-center"></a>
        </div>
        <!--/. Logo -->

        <!--Search Form-->
        <form class="search-form" role="search">
            <div class="form-group waves-effect">
                <input type="text" class="form-control" placeholder="Search">
            </div>
        </form>
        <!--/.Search Form-->

        <!-- Side navigation links -->
        <ul class="collapsible collapsible-accordion">
            <li><a class="collapsible-header waves-effect">Click me</a>
                <div class="collapsible-body">
                    <ul>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a class="collapsible-header waves-effect">Click me</a>
                <div class="collapsible-body">
                    <ul>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a class="collapsible-header waves-effect">Click me</a>
                <div class="collapsible-body">
                    <ul>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
        <!--/. Side navigation links -->
    </ul>
    <!--/. Sidebar navigation -->

    <!--Navbar 头部导航栏-->
    <nav class="navbar navbar-fixed-top scrolling-navbar double-nav">

    <!-- SideNav slide-out button 侧边栏触发按钮 -->
    <div class="pull-left">
        <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
    </div>

    <!-- Breadcrumb-->
    <div class="breadcrumb-dn">
        <p>Material Design for Bootstrap</p>
    </div>

    <ul class="nav navbar-nav pull-right">

        <li class="nav-item ">
            <!-- 模态框触发a连接 -->
            <a class="nav-link"  data-toggle="modal" data-target="#modal-contact"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a>
            <!-- /.模态框触发a连接 -->
        </li>
        <li class="nav-item ">
            <a class="nav-link"><i class="fa fa-comments-o"></i> <span class="hidden-sm-down">Support</span></a>
        </li>
        <li class="nav-item ">
            <a class="nav-link"><i class="fa fa-user"></i> <span class="hidden-sm-down">Account</span></a>
        </li>
        <li class="nav-item" >
            <!--<a data-toggle="modal" data-target="#modal-login" href="#" class=" waves-effect waves-light"><i class="fa fa-sign-in"></i><span>LogIn</span></a>-->
            <a class="nav-link"  data-toggle="modal" data-target="#modalLogin"><i class="fa fa-sign-in"></i> <span class="hidden-sm-down">LogIn</span></a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i> Profile</a>
            <div class="dropdown-menu dropdown-primary dd-right" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </li>
        <li class="nav-item">
            <!-- 触发 Modal Cart Modal a连接 -->
            <a class="nav-link"  data-toggle="modal" data-target="#cart-modal-ex"><i class="fa fa-shopping-cart"></i> <span class="hidden-sm-down">Cart</span></a>
            <!-- 触发 Modal Cart Modal a连接 -->
        </li>

    </ul>

    </nav>
    <!--/.Navbar-->

</header>
<!--/Navigation导航-->

<!-- 主页面布局-->
<main>
    <div class="main-wrapper"> <!-- 主要装饰器 -->
        <div class="container-fluid"> <!-- 全宽布局 -->

            <!--Main carousel 轮播图-->

            <!--/.Main carousel-->

            <!-- 模态框触发a连接 -->
             <a class="nav-link"  data-toggle="modal" data-target="#modal-contact"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a>
            <!-- /.模态框触发a连接 -->

            <h5 class="section-title st-mdb">Bestsellers
                <small>Secondary text</small>
            </h5>


            <!--Featured cards 特色卡-->
            <div class="row"> <!-- 栅格系统 -->

                <!--First column 第一列-->
                <div class="col-md-4">

                </div>
                <!--/First column-->

                <!--Second column 第二列-->
                <div class="col-md-4">

                </div>
                <!--/Second column-->

                <!--Third column 第三列-->
                <div class="col-md-4">

                </div>
                <!--/Third column-->
            </div>
            <!--/Featured cards-->

            <h5 class="section-title st-mdb">Collections <!-- 次级文本 -->
                <small>Secondary text</small>
            </h5>

            <!--Collections--> <! -- 收藏 -- >
            <div class="row">
                <!--First column-->
                <div class="col-md-3">

                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-3">

                </div>
                <!--/Second column-->

                <!--Third column-->
                <div class="col-md-3">

                </div>
                <!--/Third column-->

                <!--Fourth column-->
                <div class="col-md-3">

                </div>
                <!--/Fourth column-->
            </div>
            <!--/Collections-->

            <h5 class="section-title st-mdb">Additional cards
                <small>Secondary text</small>
            </h5>

            <!--Additional cards-->
            <div class="row">
                <!--First column-->
                <div class="col-md-6">

                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-6">

                </div>
                <!--/Second column-->
            </div>
            <!--/Additional cards-->

            <h5 class="section-title st-mdb">Products carousel
                <small>Secondary text</small>
            </h5>

            <!--Products carousel-->
            <div class="row">

            </div>
            <!--/Products carousel-->

            <h5 class="section-title st-mdb">Blog
                <small>Secondary text</small>
            </h5>

            <!--Blog card-->
            <div class="row">
                <!--First column-->
                <div class="col-md-4">

                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-4">

                </div>
                <!--/Second column-->

                <!--Third column-->
                <div class="col-md-4">

                </div>
                <!--/Third column-->
            </div>
            <!--/Blog card-->

        </div>
    </div>
</main>
<!-- /.主页面布局-->

<!--页脚-->
<footer>
</footer>
<!--/页脚-->


<!-- SCRIPTS -->

<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/tether.min.js"></script>

<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<script>
    // SideNav Init 侧边栏初始化
    $(".button-collapse").sideNav();
</script>

</body>

</html>